<template>
  <div>
    <div>
      <ul>
        <li
          v-for='g in goods'
          :key="g.id"
        ><router-link :to="{'path':'/detail/', query:{'id':g.id}}">{{g.title}}</router-link></li>
      </ul>
    </div>
    <div>
      <el-pagination
        layout="prev, pager, next"
        :page-size="page_size"
        :total="total_goods"
        @current-change="page_change"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goods: [
        {
          id: 1,
          title: 'goods1',
          price: '99.99',
          show_num: 123,
          desc: '物美价廉, 走过路过, 不要错过,物美价廉, 走过路过, 不要错过,物美价廉, 走过路过, 不要错过,物美价廉, 走过路过, 不要错过,物美价廉, 走过路过, 不要错过,物美价廉, 走过路过, 不要错过'
        }
      ], // 当前页商品信息
      page_size: 3, // 每页3条
      current_page: 1, // 当前页码数
      total_page: 2,  // 总页数
      total_goods: 1 // 总商品数
    }
  },
  mounted() {
    this.get_goods()
  },
  methods: {
    get_goods() {
      var params = {
        page_size: this.page_size,  // 3
        page: this.current_page,  // 1
        ordering:'-show_num'
      }
      this.axios.get('http://127.0.0.1:8000/goods/', {params}).then(res => {
        var that = this
        console.log(res)
        // [{"id":1,"title":"13","price":"123.11","show_num":0,"desc":"haoyouduo"}]
        this.goods = res.data.results
        this.total_goods = res.data.count
        // this.total_page = Math.ceil(this.total_goods / this.page_size)
        // debugger

      }).catch(err => {
        console.log(err)
      })
    },
    page_change(current_page) {
      console.log(current_page)
      this.current_page = current_page
      this.get_goods()
    }
  }
}
</script>

<style>
</style>